<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.bigbox{
			margin: 0 auto;
			width: 1500px;
			height: 2000px;
			background-color:ghostwhite;
		}
		.menu{
			width: 1500px;
			height: 60px;
			background-color:#545652;
		}
		div.menu li{
			float: left;
			list-style-type: none;
		}
		div.menu li a{

			display: block;
			text-decoration: none;
			color :black;
			line-height: 60px;
			margin: 0 10px 0 0;
			width: 120px;
			color:darkgray;
			text-align: center;
			font-size: 25px;
		}
		div.menu li a:hover{
			color: white;
		}
		thead th{
			width: 600px;
			/*		border: solid black;*/
		}
		.box{
			width: 1200px;
			height: 1200px;
			/*		border: solid 1px;*/
			margin: 60px auto;
		}
		table{
			width: 1200px;
			height: 200px;
			/*		background-color: antiquewhite;	*/
			margin-top: 10px;
			margin-bottom: 30px;
		}
		td{

			text-align: center;
		}
		th{
			height: 40px;
			background-color:lightblue;
			font-size: 20px;
			color:darkblue;
		}
		.head{
			width: 1200px;
			height: 60px;
			margin: 20px auto;
			/*background-color: #ADD8E6;*/
			position: relative;
		}
		.head p{
			width: 1200px;
			height: 60px;
			line-height: 60px;
			font-size: 40px;
			color: #3796D1;
		}

		ul{
			position: relative;
		}
		ul li:nth-of-type(7){
			position: absolute;
			right: 10px;
		}
		.head input{
			width: 600px;
			height: 40px;
			position: absolute;
			top: 9px;
			left: 300px;
			display:inline-block;
			border: none;
			border-radius: 5px 0px 0px 5px;
			box-shadow: 2px 2px 8px grey;
			color: grey;

		}
		.head p:nth-of-type(2) img{
			width: 30px;
			position: absolute;
			top: 5px;
			right: 5px;

		}
		.head p:nth-of-type(2){
			width: 40px;
			height: 40px;
			background-color: grey;
			position: absolute;
			top: 9px;
			left: 900px;
			border-radius:0px 5px 5px 0px;
			box-shadow: 2px 2px 8px grey;
		}
		.head img:nth-of-type(1){
			width: 60px;
			position: absolute;
			right: 100px;
			top:1px;
		}
		.head img:nth-of-type(2){
			width: 100px;
			height: 50px;
			position: absolute;
			top: 5px;
			right: 0px;
		}
		footer{
			width: 1500px;
			height: 200px;
			background-color:#545652;
			margin:auto;
			position: relative;

		}
		footer p{
			color: #ededed;
			text-align: center;
			font-size: 20px;
			line-height: 60px;
			position: absolute;
			bottom: 0px;
			left: 650px;
		}
	</style>
</head>

<body>
<div class="bigbox">
	<div class="menu">
		<ul>
			<li><a th:href="@{/}">主页</a></li>
			<li><a th:href="@{/movies}">电影</a></li>
			<li><a th:href="@{/directors}">导演</a></li>
			<li><a th:href="@{/performers}">演员</a></li>
			<li><a th:href="@{/box_offices}">票房情况</a></li>
            <li><a th:href="@{/evaluations}">评价</a></li>
			<li><a th:href="@{/register}">登录/注册</a></li>

		</ul>
	</div>

	<div class="head">
		<p>影评网站</p>
		<input  type="text" value="搜索电影、导演、影人"/>
        <p><img src="../../static/img/1.jpg"></p>
		<img src="../../static/img/2.png">
		<img src="../../static/img/3.jpg"/>
	</div>

	<div class="box">

		<table class="a">
			<p>电影票房</p>
			<hr color="#C1C1C1" size="1"/>
			<thead>
<!--			<th>演员</th>-->
			<th>电影票房数</th>
			</thead>
			<tbody>
			<!--             迭代值        迭代变量-->

			<tr th:each="aBox_office : ${box_offices}">
				<!-- th:text表示将元素内容替换成传入的文本。-->
				<td th:text="${aBox_office.number}"></td>
			</tr>
			</tbody>

		</table>
		<br/>
		<p>导演</p>
		<hr color= "#C1C1C1" size="1"/>

		<table class="b">
			<thead>
			<th>导演名</th>
			<th>编导电影</th>
			</thead>
			<tbody>
			<!--             迭代值        迭代变量-->
			<tr th:each="aDirector: ${directors}">
				<!-- th:text表示将元素内容替换成传入的文本。-->
				<td th:text="${aDirector.name}"></td>
				<td th:text="${aDirector.works_name}"></td>
			</tr>
			</tbody>
		</table>

		<br/>
		<p>最受欢迎的影评</p>
		<hr color="#C1C1C1" size="1"/>

		<table class="c">
			<thead>
			<th>内容</th>
			</thead>
			<tbody>
			<!--             迭代值        迭代变量-->
			<tr th:each="aEvaluation : ${evaluations}">
				<td th:text="${aEvaluation.content}"></td>

			</tr>
			</tbody>
		</table>

		<br/>
		<p>推荐电影</p>
		<hr color="#C1C1C1" size="1"/>

		<table class="d">
			<thead>
			<th>电影名</th>
			<th>电影介绍</th>
			</thead>
			<tbody>
			<!--             迭代值        迭代变量-->
			<tr th:each="aMovie: ${movies}">
				<td th:text="${aMovie.movie_name}"></td>
				<td th:text="${aMovie.intro}"></td>
			</tr>
			</tbody>
		</table>

		<br/>
		<p>演员信息</p>
		<hr color="#C1C1C1" size="1"/>

		<table class="e">
			<thead>
			<th>演员</th>
			<th>参演电影</th>
			</thead>
			<tbody>
			<!--             迭代值        迭代变量-->
			<tr th:each="aPerformer : ${performers}">
				<!-- th:text表示将元素内容替换成传入的文本。-->
				<td th:text="${aPerformer.name}"></td>
				<td th:text="${aPerformer.works_name}"></td>
			</tr>
			</tbody>
		</table>
	</div>
</div>
<footer><p>yingpingwanzhan@qq.com</p></footer>

<!--	</div>-->

</body>
</html>
